<template>
	<view class="">
		<view class="bg-content">
			<view class="top-info">
				<uni-nav-bar left-icon="left" @clickLeft="back"	 color="#fff" backgroundColor="rgba(0,0,0,0)"></uni-nav-bar>
				<view class="user-info">
					<image :src="userInfoAttion.avatar" mode=""></image>
					<view>{{userInfoAttion.nickname}}</view>
				</view>
			</view>
		</view>
		<view class="box-content">
			<view class="nums-lines">
				<view class="item-nums"><text>{{userInfoAttion.like}}</text>获赞</view>
				<view class="item-nums"><text>{{userInfoAttion.collect_n}}</text>收藏</view>
				<view class="item-nums"><text>{{userInfoAttion.turn_num}}</text>转发</view>
			</view>
			<view class="list-content">
				<roc-scroll @loadData="loadData" :visible_height="visible_height" :hasMore="hasMore"
					refresher_background="#fff" :data_number="data_number" :solt_height="solt_height" background="#fff"
					footer_background="#fff">
					<view class="list-content-inner" slot="data-content">
						<view class="item" v-for="(item,index) in data" :key="index" @click="todetail(item)">
							<image :src="item.image" mode=""></image>
							<view class="nums" @click.stop="collect(item)">
								<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/xin.png" mode=""></image>
								<view class="">
									{{item.like_num}}
								</view>
							</view>
						</view>
					</view>
				</roc-scroll>
			</view>
			
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 1,
				hasMore: true,
				data: [],
				data_number: 0,
				strateList:['999'],
				allPage:0,
				current:0,
				userInfoAttion:{},
				user_id:""
			}
		},
		onLoad(option){
			this.user_id = option.user_id
			this.loadData(0)
			this.getAttionInfo()
		},
		onReachBottom() {
			this.loadData(0)
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			getAttionInfo(){
				const value = uni.getStorageSync('user');
				let that = this
				this.request.httpTokenRequest({
					url: "tour/getTourUser",
					method: "get"
				}, {
					user_id:this.user_id
				}).then(res => {
					if (res.code == 0) {
						that.userInfoAttion = res.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			todetail(item){
				uni.navigateTo({
					url:"/otherpages/video/index/index?id="+item.id
				})
			},
			collect(item){
				let that = this
				this.request.httpTokenRequest({
					url: "tour/collect",
					method: "get"
				}, {
					tour_id:item.id
				}).then(res => {
					if (res.code == 0) {
						item.is = 1
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			loadData(type,callback){
				if(type ==1){
					this.page = 0 
					this.data = []
				}
				let that = this
				this.request.httpTokenRequest({
					url: "tour/getUserTourList",
					method: "get"
				}, {
					user_id:this.user_id,
					page:this.page
				}).then(res => {
					if (res.code == 0) {
						// that.allPage = res.data.total
						// 把后端数据赋给页面
						that.data = [...that.data, ...res.data.data];
						
						that.data_number = that.data.length
						that.page++
						// 隐藏加载条 重置下拉 上拉状态
						if (res.data.last_page ==  res.data.per_page){
							that.hasMore= false
						}
						if (type) callback(false)
						
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	.uni-navbar__header{
		font-size: 40rpx !important;
	}
	.bg-content{
		background: url('https://qiniu-cdn.maeiyun.com/imgs/lvyou/bg-zhuye.png')no-repeat;
		background-size: 100% 100%;
		height: 552rpx;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		position: relative;
	}
	.user-info{
		// width: auto;
		// text-align: center;
		padding-left: 32rpx;
		margin-top: 20rpx;
		image{
			width: 132rpx;
			height: 132rpx;
			border-radius: 50%;
			border: 6rpx solid #fff;
		}
		font-size: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.nums-lines{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -80rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 110rpx;
		padding-bottom: 30rpx;
		.item-nums{
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #969696;
			text{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				color: #1E1E1E;
				margin-right: 10rpx;
			}
		}
	}
	.list-type{
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		margin-top: 20rpx;
		.item-type{
			width: 40%;
			text-align: center;
			padding: 10rpx 0;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #1E1E1E;
			border-bottom: 4rpx solid #F5F7F8;
		}
		.select-type{
			font-weight: bold;
			border-bottom: 4rpx solid #C6C7C8;
		}
	}
	.list-content{
		margin-top: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding:29rpx 24rpx;
	}
	//
	.list-content-inner{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.item {
		width: 48%;
		// padding: 10rpx 20rpx;
		flex: 0 0 auto;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		image{
			width: 100%;
			height: 409rpx;
		}
		
	}
	.nums{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		bottom: 23rpx;
		left: 21rpx;
		image{
			width: 49rpx;
			height: 42rpx;
			margin-right: 11rpx;
		}
	}
</style>